<template>
		<view class="shop acea-row">
			<view class="total fillet">
				<view class="swipers" v-if="shopLeftType == 1">
					<navigator :url='carLifeUrl' class='slide-navigator acea-row row-between-wrapper' hover-class='none'>
						<image :src="carLifeImg" class="slide-image" mode="widthFix"></image>
					</navigator>
				</view>
				<view class="swipers" v-if="shopLeftType == 2">
					<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :circular="circular">
						<swiper-item v-for="(item,index) in shopLefts" :key="index">
							<navigator :url="item.url" :hover-class="none">
								<image :src="item.img"></image>
							</navigator>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<view class="extra">
				<navigator :url="integralUrl" hover-class="none">
					<view class="point">
						<image :src="integralSrc"></image>
						<!-- <text class="desc color">积分商城</text> -->
					</view>
				</navigator>
				<navigator :url="boutiqueUrl" hover-class="none">
					<view class="gift">
						<image :src="boutiqueSrc"></image>
						<!-- <text class="desc">精品商城</text> -->
					</view>
				</navigator>
			</view>
		</view>
</template>

<script>
	export default {
		name: 'Shop',
		props: {
			
		},
		data() {
			return {
				indicatorDots: false,
				circular: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				imageH:0,
				imgUrls:[],
				integralUrl:"",
				integralSrc:"",
				boutiqueUrl:"",
				boutiqueSrc:"",
				carLifeUrl:"",
				carLifeImg:"",
				shopLeftType: 1,
				shopLefts:[]
			};
		},
		watch:{
			imageH(nVal,oVal){
				this.imageH = nVal
			}
		},
		created() {
			var that = this;
			//获取魔方
			uni.request({
				 url: 'https://d.qj361.com/api/yizhan/magic_cube/banner', //仅为示例，并非真实接口地址。
				    data: {},
				    header: {},
				    success: (res) => {
						console.log("魔方")
				        console.log(res.data);
						var res = res.data;
						var carLife = res.car_life_banner;
						var isArr = Array.isArray(carLife);
						if(isArr){
							//swiper
							that.shopLeftType = 2;
							that.shopLefts = carLife;
						}else{
							//image
							that.shopLeftType = 1;
							that.carLifeUrl = res.car_life_banner.url;
							that.carLifeImg = res.car_life_banner.img
						};
						
						that.integralUrl = res.integral_banner.url;
						that.integralSrc = res.integral_banner.img;
						that.boutiqueUrl = res.boutique_banner.url;
						that.boutiqueSrc = res.boutique_banner.img
				    }
			});
		},
		mounted() {
			let that = this;
			uni.getImageInfo({
				// src: that.setDomain(that.imgUrls[0].img),
				// src:that.imgUrls[0].img,
				success: function(res) {
					console.log("res"+res.height);
					that.$set(that, 'imageH', res.height);
				}
			})
		},
		methods: {
			// swiper
			// swiperChange(e) {
			// 	this.swiperCur = e.detail.current
			// },
			//替换安全域名
			setDomain: function(url) {
				url = url ? url.toString() : '';
				return url;
				//本地调试打开,生产请注销
				// if (url.indexOf("https://") > -1) return url;
				// else return url.replace('http://', 'https://');
			}
		}
	}
</script>

<style lang="scss">
	.shop {
		width:100%;
		height:488rpx;
		padding::20rpx 48rpx 16rpx 48rpx;
		// background-color: #ffffff;
		/* 设置圆角 */
		.fillet {
			border-radius: 8rpx;
		
			image {
				border-radius: 8rpx;
			}
		}
		
		/* 商城 */
		.total{
			width:320rpx;
			height:100%;
			.swipers {
				position: relative;
				width: 100%;
				height:100%;
				margin: 0 auto;
				
				swiper{
					border-radius: 10rpx;
					overflow: hidden;
					/* 兼容IOS，否则在swiper组件内的布局都不受border-radius和overflow的约束 */
					transform: translateY(0);
				}
				swiper,
				.swiper-item,
				navigator,
				image {
					width: 100%;
					height:100%;
				}
				// image{
				// 	transform: scale(1);
				// 	transition: all .6s ease;
				// }
				// swiper-item.active {
				// 	image {
				// 		transform: scale(1);
				// 	}
				// }
				// 圆形指示点
				.circular{
					/deep/.uni-swiper-dot{
						width: 10rpx!important;
						height: 10rpx!important;
						border: 1px solid #C30D22!important;
						background: rgba(0,0,0,0)!important;
					}
					/deep/.uni-swiper-dot-active{
						background: #C30D22!important
					}
				}
				// 方形指示点
				.square{
					/deep/.uni-swiper-dot{
						width: 20rpx!important;
						height: 5rpx!important;
						border-radius: 3rpx;
						background: rgba(0,0,0,.4)!important
					}
					/deep/.uni-swiper-dot-active{
						background: #fff!important
					}
				}
			}
		}
		.extra{
			width:320rpx;
			margin-left:14rpx;
			.point,.gift{
				width:320rpx;
				height:220rpx;
				position:relative;
				image{ 
					width:100%;
					height:100%;
				}
				.desc{
					position:absolute;
					left:22rpx; 
					top:22rpx;
					font-size: 32rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 45rpx;
				}
				.color{
					color: #883234; 
				}
			}
			.point{
				margin-bottom:16rpx;
			}
			
		}
		
	}
</style>
